import { ConfigProvider } from 'antd'
import zhCN from 'antd/locale/zh_CN'
import React, { useMemo, useState } from 'react'

const ThemeContext = React.createContext({
  theme: 'light',
  toggleTheme: () => {},
})

export function useAppTheme() {
  const AppThemeProvider = ({ children }) => {
    const [theme, setTheme] = useState('light')
    const [locale, setLocale] = useState(zhCN)

    const toggleTheme = () => {
      setTheme((theme) => (theme === 'light' ? 'dark' : 'light'))
    }

    const themeValue = useMemo(() => ({ theme, toggleTheme }), [theme])

    return (
      <ConfigProvider locale={locale}>
        <ThemeContext.Provider value={themeValue}>{children}</ThemeContext.Provider>
      </ConfigProvider>
    )
  }

  return { ThemeContext, AppThemeProvider }
}
